<!doctype html>
<html lang="zxx">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <link rel="stylesheet" href="/layui/css/layui.css">

    <title>编辑地址</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>


<div class="modal fade cart-shit" id="exampleModal-cart" tabindex="-1" aria-hidden="true">
    <div class="cart-shit-wrap">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close-btn" data-bs-dismiss="modal">
                        <i class="ri-close-fill"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="cart-list">
                        <li>
                            <img src="/picture/product-1.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                DFMALB 20V Max XX Oscillating Multi Tool Variable Speed Tool
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-2.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Power Tools Set Chinese Manufacturer Production 50V Lithu Battery
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-3.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Electrical Magnetic Impact Power Hammer Drills Machine
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-4.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Professional Cordless Drill Power Tools Set Competitive Price
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                    </ul>
                    <ul class="payable">
                        <li>
                            Payable total
                        </li>
                        <li class="total">
                            <span>$564.00</span>
                        </li>
                    </ul>
                    <ul class="cart-check-btn">
                        <li>
                            <a href="shopping-cart.html" class="default-btn">
                                View Cart
                            </a>
                        </li>
                        <li class="checkout">
                            <a href="checkout.html" class="default-btn">
                                Checkout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <ul>
                <li>
                    <a href="/page/index">
                        首页
                    </a>
                </li>
                <li class="active">修改地址</li>
            </ul>
        </div>
    </div>
</div>


<section class="dashboard-area ptb-54">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <ul class="dashboard-navigation">
                    <li>
                        <h3>分页</h3>
                    </li>
                    <li>
                        <a href="/page/dashboard" >个人信息</a>
                    </li>
                    <li>
                        <a href="/page/editprofile">修改个人信息</a>
                    </li>
                    <li>
                        <a href="/page/addaddress">新增地址</a>
                    </li>
                    <li>
                        <a href="/page/address">收货地址</a>
                    </li>
                    <li>
                        <a href="/page/password">修改密码</a>
                    </li>
                    <li>
                        <a href="/page/orders">订单信息</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-8">
                <div class="edit-profile">
                    <h3>编辑地址</h3>
                    <form class="submit-property-form layui-form">
                        <div class="row">
                            <div class="layui-form-item">
                                <input type="hidden" class="form-control" style="height: 38px;width: 190px" name="userid" value="">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称</label>
                                <input type="text" class="form-control" style="height: 38px;width: 190px" name="name">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                    <input type="text" class="form-control" style="height: 38px;width: 190px" name="telephone">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">省份</label>
                                <div class="layui-input-inline">
                                    <select type="text" name="provincecode" lay-filter="provincecode" style="height: 60px;width: 400px"></select>
                                    <input type="hidden" name="province">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">城市</label>
                                <div class="layui-input-inline">
                                    <select type="text" name="citycode" lay-filter="citycode"></select>
                                    <input type="hidden" name="city">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">区划</label>
                                <div class="layui-input-inline">
                                    <select type="text" name="areacode" lay-filter="areacode"></select>
                                    <input type="hidden" name="area">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">详细地址</label>
                                <input type="text" class="form-control" style="height: 38px;width: 190px" name="address">
                            </div>
                            <div class="col-lg-12">
                                <button type="button" class="default-btn" lay-submit lay-filter="editsave">
                                    保存
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>


<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>


<script src="/js/jquery.min.js"></script>

<script src="/js/bootstrap.bundle.min.js"></script>

<script src="/js/meanmenu.min.js"></script>

<script src="/js/owl.carousel.min.js"></script>

<script src="/js/wow.min.js"></script>

<script src="/js/range-slider.min.js"></script>

<script src="/js/form-validator.min.js"></script>

<script src="/js/contact-form-script.js"></script>

<script src="/js/ajaxchimp.min.js"></script>

<script src="/js/custom.js"></script>

<script src="/layui/layui.all.js"></script>

<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script th:inline="javascript">
    const $ = layui.$;
    const form = layui.form;
    const layer = layui.layer;
    const userID= parseInt($('#userId').val(),10);
    $("[name=userid]").attr('value',userID);
    const id=/*[[${addid}]]*/

    $.ajax({
        url:'/address/getaddressbyid',
        data:{id},
        success:function(result){
            showitemArea(100000,$("[name='provincecode']"),result.province,result.provincecode);
            showitemArea(result.provincecode,$("[name='citycode']"),result.city,result.citycode);
            showitemArea(result.citycode,$("[name='areacode']"),result.area,result.areacode);
            $("[name=name]").attr('value',result.name);
            $("[name=telephone]").attr('value',result.telephone);
            $("[name=address]").attr('value',result.address);

        }
    })

    function showitemArea(code,$dom,name,itemcode){
        $.ajax({
            url: "https://restapi.amap.com/v3/config/district",
            data: { key: 'd5e466c74f37e2b1f89163a68a161ea7', keywords: code },
            success:function(result){
                let children=result.districts[0].districts;
                $dom.empty();
                $dom.append($("<option value='"+itemcode+"'>"+name+"</option>"));
                for (let i=0;i<children.length;i++){
                    if(children[i].adcode!=code) {
                        $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                    }
                }
                form.render("select");
            }
        });
    }

    function showArea(code,$dom){
        $.ajax({
            url: "https://restapi.amap.com/v3/config/district",
            data: { key: 'd5e466c74f37e2b1f89163a68a161ea7', keywords: code },
            success:function(result){
                let children=result.districts[0].districts;
                $dom.empty();
                for (let i=0;i<children.length;i++){
                    $dom.append($("<option value='"+children[i].adcode+"'>"+children[i].name+"</option>"));
                }
                form.render("select");
            }
        });
    }

    form.on('select(provincecode)',function (data){
        let provincecode = data.value;
        console.log(data.value);
        showArea(provincecode, $("[name='citycode']"));
        let provincename = $(data.othis).find("input").val();
        $("[name='province']").val(provincename);
    })
    form.on('select(citycode)',function (data){
        let citycode = data.value;
        showArea(citycode, $("[name='areacode']"));
        let cityname = $(data.othis).find("input").val();
        $("[name='city']").val(cityname);
    })
    form.on('select(areacode)',function (data){
        let areaname = $(data.othis).find("input").val();
        $("[name='area']").val(areaname);
    })

    form.on("submit(editsave)",function(data){
        console.log(data);
        $.ajax({
            url:'/address/update',
            data:{
                id:id,
                address:data.field.address,
                area:data.field.area,
                city:data.field.city,
                province:data.field.province,
                areacode:data.field.areacode,
                citycode:data.field.citycode,
                provincecode:data.field.provincecode,
                telephone:data.field.telephone,
                name:data.field.name
            },
            success:function(){
                layer.msg("修改成功", {
                    icon: 1,
                    time: 1200,
                    end: function() {
                        window.location.href = '/page/address';
                    }
                });
            }
        })
    })

</script>
<script>
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $item.find("a").attr('href','/page/categoryproducts?pid='+result[i].id);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>